<template>
  <el-dialog
    title="查询决算单列表"
    :visible.sync="visible"
    width="70%"
    lock-scroll
    :before-close="handleClose"
    append-to-body
  >
    <el-dialog
      title="送审核决算单"
      :visible.sync="innerVisible"
      width="60%"
      lock-scroll
      append-to-body
    >
      <el-form ref="formData" label-width="130px">
          <el-form-item label="审核人:">
            <el-select
              v-model="reviewer"
              placeholder="请选择"
              class="m-select"
            >
              <el-option
                v-for="item in reviewerList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <div class="innerClass">
        <el-button type="primary" @click="sendBtn">发 送</el-button>
        <el-button type="primary" @click="cancelBtn">取 消</el-button>
      </div>
    </el-dialog>
    <div>
      <el-col class="btnClass">
        <el-button type="primary" @click="innerVisible = true"
          >送审核</el-button
        >
        <el-button type="primary" @click="confirmBtn">确 认</el-button>
        <el-button type="primary" @click="returnBtn">返 回</el-button>
      </el-col>
      <el-table
        ref="tableData"
        border
        :header-cell-style="{
          background: '#F2F2F2',
          color: '#333',
        }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          label="决算单id"
          prop="contactName"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="客户名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="流水号-批次号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="合同编号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="收款单位"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="收费总额"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="送审标识"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="currentChange"
        :current-page="parseInt(tablePage.pageIndex)"
        :page-size="parseInt(tablePage.pageSize)"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(tablePage.rowCount)"
        class="m-pagination"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerVisible:false,//耳机弹窗
      tableData: [],
      tablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
      },
      reviewer:'',//审核人
      reviewerList:[
          {
              code:'',
              name:'请选择'
          },
          {
              code:'1',
              name:'张三'
          }
      ]
   };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleClose() {
      this.$emit("closeDialog");
    },
    confirmBtn() {},
    returnBtn() {},
    //改变当前页
    currentChange() {},
    //发送事件
    sendBtn(){

    },
    cancelBtn(){
        this.innerVisible = false;
    }
  },
};
</script>
<style lang='scss' scoped>
.radioBtn {
  padding-left: 0.2rem;
}
.m-pagination {
  margin-top: 10px;
  text-align: right;
}
.btnClass {
  text-align: right;
  margin-bottom: 10px;
}
.innerClass {
    text-align: center;
}
</style>